<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script th:src="@{/static/vue/vue.js}"></script>
    <script th:src="@{/static/vue/axios.js}"></script>
    <script th:src="@{/static/vue/index.js}"></script>

    <link rel="stylesheet" th:href="@{/static/vue/index.css}">

    <style>
        #app {
            font-family: 'Avenir', Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
        }

        .v-enter,
        .v-leave-to {
            /* 透明度 */
            opacity: 0;
            transform: translateY(10px);
        }
        /*
        v-enter-active [时间段]入场动画时间段
        v-leave-active  [时间段]离场动画时间段
        */

        .v-enter-active,
        .v-leave-acive {
            transition: all 1.5s ease;
        }
    </style>

    <!-- Head -->
    <style>
        .title {
            margin: 15% 30px 1% 30px;
            padding: 0 50px 0 50px;
        }
        .big-title {
            font-size: 80px;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
            "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }
        .small-title {
            font-size: 16px;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
            "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            margin-bottom: 20px;
            padding-left: 100px;
        }
    </style>

    <!-- LoginForm -->
    <style>
        .input {
            width: 300px;
            margin: 0;
            padding: 0;
        }
        .row {
            padding: 10px 0;
        }
    </style>
</head>
<body>
<div id="app">

    <!-- 头开始 -->
    <div class="Head">
        <div class="title">
            <div class="big-title">Shiro-Master</div>
        </div>
    </div>
    <!-- 头结束 -->

    <!-- 中间件开始 -->
    <div class="small-title">一款基于SpringBoot + Shiro的权限管理系统</div>
    <!-- 中间件结束 -->

    <div class="login">
        <div class="row">
            <el-input
                    class="input"
                    id="username"
                    type="text"
                    placeholder="请输入用户名"
                    v-model="username"
                    clearable
                    @keyup.enter.native="login"></el-input>
        </div>
        <div class="row">
            <el-input
                    class="input"
                    id="password"
                    type="password"
                    placeholder="请输入密码"
                    v-model="password"
                    clearable
                    @keyup.enter.native="login"></el-input>
        </div>
        <br/>
        <div class="row">
            <el-button @click="login" type="success" plain round>登录</el-button>
        </div>

        <!-- 只做跳转 -->
        <form action="http://localhost:8443/index" method="POST" id="form" v-show="false"></form>

    </div>
</div>
</body>
</html>

<script>
    new Vue({
        el: "#app",
        data: {
            username: 'Rose',
            password: '123'
        },
        methods: {
            login() {
                if (this.username === "" || this.password === "") {
                    this.$message({
                        showClose: true,
                        message: "请正确输入数据",
                        type: "warning",
                        duration: "1000"
                    });
                } else {
                    axios.post('http://localhost:8443/toLogin', {
                        username: this.username,
                        password: this.password
                    })
                    .then( req => {
                        if (req.data.code === 200) {
                            this.$message({
                                showClose: true,
                                message: "登录成功",
                                type: "success",
                                duration: "600"
                            });
                            document.getElementById("form").submit();
                        } else if ( req.data.code === 403) {
                            this.$message({
                                showClose: true,
                                message: "登录失败, 原因: " + req.data.message,
                                type: "error",
                                duration: "3000"
                            });
                        }
                    })
                }
            }
        }
    })
</script>